import React, { useState } from "react";
import {
  Button,
  Space,
  Divider,
  Radio,
  Switch,
  Card,
  Typography,
  Row,
  Col,
} from "antd";
import { InfoCircleOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import Tooltip from "../components/Tooltip";
import InfoTooltipIcon from "../components/InfoTooltipIcon";
import styles from "./styles/tooltipDemo.module.css";

const { Title, Paragraph, Text } = Typography;

const TooltipDemo: React.FC = () => {
  const [open, setOpen] = useState(false);
  const [color, setColor] = useState("#1677ff");
  const [placement, setPlacement] = useState<any>("top");
  const [trigger, setTrigger] = useState<any>("hover");
  const [showArrow, setShowArrow] = useState(false); // 默认不显示箭头
  const [centerArrow, setCenterArrow] = useState(false);

  const triggers = ["hover", "focus", "click", "contextMenu"];

  const colors = [
    "#1677ff",
    "#f5222d",
    "#fa8c16",
    "#fadb14",
    "#52c41a",
    "#13c2c2",
    "#722ed1",
    "#eb2f96",
  ];

  return (
    <div className={styles.container}>
      <Title level={2}>Ant Design Tooltip 组件</Title>
      <Paragraph>
        强大、美观的气泡提示组件，可以为各种元素添加提示信息。
      </Paragraph>

      <Divider orientation="left">基础使用</Divider>
      <Space size="large" wrap>
        <Tooltip content="这是一个简单的提示">
          <Button>悬停提示</Button>
        </Tooltip>

        <Tooltip content="点击才会显示" trigger="click">
          <Button>点击提示</Button>
        </Tooltip>

        <Tooltip
          content={
            <div>
              <Text strong>富文本提示</Text>
              <p>支持任意 React 元素</p>
            </div>
          }
        >
          <Button type="primary" icon={<InfoCircleOutlined />}>
            富文本提示
          </Button>
        </Tooltip>
      </Space>

      <Divider orientation="left">箭头与颜色</Divider>
      <Space size="large" wrap>
        {colors.map((c) => (
          <Tooltip key={c} content="自定义颜色" color={c}>
            <Button style={{ background: c, color: "#fff" }}>{c}</Button>
          </Tooltip>
        ))}

        <Tooltip content="带箭头提示" arrow={true} color="#333">
          <Button>显示箭头</Button>
        </Tooltip>

        <Tooltip
          content="箭头指向中心点"
          arrow={{ pointAtCenter: true }}
          color="#333"
        >
          <Button>居中箭头</Button>
        </Tooltip>
      </Space>

      <Divider orientation="left">自定义配置</Divider>
      <Card variant="outlined">
        <Row gutter={[16, 16]}>
          <Col span={24} md={12}>
            <Space direction="vertical" style={{ width: "100%" }}>
              <div>
                <Text>位置:</Text>
                <Radio.Group
                  value={placement}
                  onChange={(e) => setPlacement(e.target.value)}
                  buttonStyle="solid"
                  className={styles.optionItem}
                >
                  <Radio.Button value="top">上</Radio.Button>
                  <Radio.Button value="right">右</Radio.Button>
                  <Radio.Button value="bottom">下</Radio.Button>
                  <Radio.Button value="left">左</Radio.Button>
                </Radio.Group>
              </div>

              <div>
                <Text>触发方式:</Text>
                <Radio.Group
                  value={trigger}
                  onChange={(e) => setTrigger(e.target.value)}
                  className={styles.optionItem}
                >
                  {triggers.map((t) => (
                    <Radio key={t} value={t}>
                      {t}
                    </Radio>
                  ))}
                </Radio.Group>
              </div>

              <div>
                <Text>颜色:</Text>
                <input
                  type="color"
                  value={color}
                  onChange={(e) => setColor(e.target.value)}
                  className={styles.colorInput}
                />
              </div>

              <div>
                <Text>显示箭头:</Text>
                <Switch
                  checked={showArrow}
                  onChange={setShowArrow}
                  className={styles.optionItem}
                />
              </div>

              <div>
                <Text>箭头指向中心:</Text>
                <Switch
                  checked={centerArrow}
                  onChange={setCenterArrow}
                  disabled={!showArrow}
                  className={styles.optionItem}
                />
              </div>

              <div>
                <Text>强制显示:</Text>
                <Switch
                  checked={open}
                  onChange={setOpen}
                  className={styles.optionItem}
                />
              </div>
            </Space>
          </Col>

          <Col span={24} md={12}>
            <div className={styles.previewContainer}>
              <Tooltip
                content={
                  <div>
                    <Text style={{ color: "#fff" }}>这是一个自定义提示</Text>
                    <div>您可以调整左侧的配置查看效果</div>
                  </div>
                }
                placement={placement}
                trigger={trigger}
                color={color}
                arrow={
                  showArrow
                    ? centerArrow
                      ? { pointAtCenter: true }
                      : true
                    : false
                }
                open={open}
                onOpenChange={setOpen}
              >
                <Button
                  type="primary"
                  icon={<QuestionCircleOutlined />}
                  size="large"
                >
                  预览效果
                </Button>
              </Tooltip>
            </div>
          </Col>
        </Row>
      </Card>

      <Divider orientation="left">使用案例</Divider>
      <Card variant="outlined">
        <Paragraph>
          文本中的提示：Ant Design 是一套企业级 UI 设计语言和
          <Tooltip content="这是一个强大的 React UI 库">
            <Text strong className={styles.helpText}>
              React 组件库
            </Text>
          </Tooltip>
          ， 致力于提供愉悦的开发体验。
        </Paragraph>

        <Space>
          <Tooltip content="复制到剪贴板" placement="bottom">
            <Button icon={<span>📋</span>}></Button>
          </Tooltip>

          <Tooltip content="查看详情" placement="bottom">
            <Button icon={<span>👁️</span>}></Button>
          </Tooltip>

          <Tooltip content="删除此项" color="#ff4d4f" placement="bottom">
            <Button danger icon={<span>🗑️</span>}></Button>
          </Tooltip>
        </Space>
      </Card>

      <Divider orientation="left">自定义内容区</Divider>
      <Card>
        <Paragraph>
          这是一个自定义内容区，展示如何使用 <Text strong>InfoTooltipIcon</Text>{" "}
          组件。
        </Paragraph>
        <Space>
          <InfoTooltipIcon tooltipText="这是一个提示信息" />
          <InfoTooltipIcon tooltipText="另一个提示信息" />
        </Space>
      </Card>
      <Divider orientation="left">API 参考</Divider>
      <Card variant="outlined">
        <pre className={styles.codeBlock}>
          {`import InfoTooltipIcon from "@/components/InfoTooltipIcon";

// 使用示例
<InfoTooltipIcon tooltipText="这是一个提示信息" />`}
        </pre>
      </Card>
    </div>
  );
};

export default TooltipDemo;
